<template>
  <!--  <div class="messageList self_scroll" @mousemove.stop="moveMessage" @mousewheel="ifShowRightList = false">-->
  <!--    <div class="netWork" v-show="!onLine">-->
  <!--      <img src="@/assets/message/netError.png" alt="">-->
  <!--      当前网络不可用，请检查你的网络-->
  <!--    </div>-->
  <!--    <single-message @click.native="selectUser(item)" @contextmenu.prevent.native="rightClick(item, $event)"-->
  <!--                    :ref="'message'+ item.user_id" v-for="item in chatInformation" :key="item.id_type + '-' + item.id" :id="item.id" :name="item.name" :time="item.messages | msgTime" :words="item.messages | lastMsg" :unread-message="item.unreadMessage" :id-type="item.id_type"></single-message>-->
  <!--    <ul class="rightList" v-show="ifShowRightList">-->
  <!--      <li class="cp" @click="removeChat">移除</li>-->
  <!--    </ul>-->
  <!--  </div>-->
  <div class="messageList self_scroll" @mousewheel="ifShowRightList = false">
    <div class="netWork" v-show="!onLine">
      <img src="@/assets/message/netError.png" alt="" />
      当前网络不可用，请检查你的网络
    </div>
    <single-message
      @click.native="selectUser(item)"
      @contextmenu.prevent.native="rightClick(item, $event)"
      v-for="item in realList"
      :key="item.id_type + '-' + item.id"
      :id="item.id"
      :msgUserID="item.messages | lastMsgUserID"
      :name="item.remarks ? item.remarks : item.name"
      :time="item.messages | msgTime"
      :words="item.messages | lastMsg"
      :id-type="item.id_type"
      :unread-message="item.messages | unreadCount"
      :draft="item.draft"
    ></single-message>
    <ul class="rightList" v-show="ifShowRightList">
      <li class="cp" @click="removeChat">移除</li>
    </ul>
  </div>
</template>

<script>
import singleMessage from './components/singleMessage'

export default {
  components: {
    singleMessage
  },
  data () {
    return {
      // 右键所在项
      userInfo: null,
      // 网络状态
      onLine: navigator.onLine,
      // 实际渲染的数组
      realList: [],
      timer: null
    }
  },
  computed: {
    moveId () {
      return this.$store.state.message.moveMessage_id
    },
    // 最近联系人列表
    chatInformation () {
      return this.$store.state.chatInformation.chatInformation
    },
    // 是否显示右键菜单
    ifShowRightList: {
      get () {
        return this.$store.state.message.ifShowRightList
      },
      set (val) {}
    },
    // 当前联系人
    current_contact () {
      return this.$store.state.chatInformation.current_contact
    }
  },
  watch: {
    ifShowRightList (val) {
      if (!val) {
        this.rightId = null
      }
    },
    chatInformation: {
      deep: true,
      immediate: true,
      handler (val) {
        this.realList = JSON.parse(JSON.stringify(val))
      }
    }
  },
  methods: {
    // moveMessage (e) {
    //   //
    //   if (!this.moveId) return
    //   this.$refs['message' + this.moveId][0].moveMessage(e.pageX, e.pageY)
    //   //
    // },
    // 选中用户
    selectUser (item) {
      if (
        !(
          item.id === this.$store.state.chatInformation.current_contact.id &&
          item.id_type ===
            this.$store.state.chatInformation.current_contact.id_type
        )
      ) {
        this.$store.commit('chatInformation/set_current_contact', {
          id: item.id,
          id_type: item.id_type
        })
      }
    },
    // 鼠标右键
    rightClick (item, e) {
      if (item.id_type !== 0) {
        const rightList = document.querySelector('.rightList')
        rightList.style.left = e.clientX + 'px'
        rightList.style.top = e.clientY + 'px'
        this.$store.commit('message/set_ifShowRightList', true)
        this.userInfo = {
          id: item.id,
          idType: item.id_type
        }
      }
    },
    // 移除聊天
    removeChat () {
      this.$store.dispatch('chatInformation/removeRecent', this.userInfo)
    },
    // 改变online值
    updateOnlineStatus (e) {
      const { type } = e
      this.onLine = type === 'online'
    },
    // 键盘方向键事件
    changeChat (e) {
      let pos
      if (e.code === 'ArrowUp') {
        this.realList.forEach((item, index) => {
          if (
            item.id === this.current_contact.id &&
            item.id_type === this.current_contact.id_type
          ) {
            pos = index
          }
        })
        if (typeof pos === 'number' && pos !== 0) {
          this.$store.commit('chatInformation/set_current_contact', {
            id: this.realList[pos - 1].id,
            id_type: this.realList[pos - 1].id_type
          })
        }
      } else if (e.code === 'ArrowDown') {
        this.realList.forEach((item, index) => {
          if (
            item.id === this.current_contact.id &&
            item.id_type === this.current_contact.id_type
          ) {
            pos = index
          }
        })
        if (typeof pos === 'number' && pos !== this.realList.length - 1) {
          this.$store.commit('chatInformation/set_current_contact', {
            id: this.realList[pos + 1].id,
            id_type: this.realList[pos + 1].id_type
          })
        }
      }
    }
  },
  created () {
    window.onclick = () => {
      this.ifShowRightList = false
    }
  },
  mounted () {
    // if (this.chatInformation.length) {
    //   this.selectUser(this.chatInformation[0])
    // }
    // 监听网络状态
    window.addEventListener('online', this.updateOnlineStatus)
    window.addEventListener('offline', this.updateOnlineStatus)

    // 监听键盘方向键
    window.addEventListener('keyup', this.changeChat)

    // 刷新联系人列表更新时间
    this.timer = setInterval(() => {
      this.realList = this.realList.filter(item => item)
    }, 1000)
  },
  beforeDestroy () {
    // 移除监听事件
    window.removeEventListener('online', this.updateOnlineStatus)
    window.removeEventListener('offline', this.updateOnlineStatus)
    window.removeEventListener('keyup', this.changeChat)

    clearInterval(this.timer)
  }
}
</script>

<style scoped lang="scss">
.messageList {
  height: calc(100% - 72px);
  // background-color: skyblue;
  // position: relative;
  .netWork {
    height: 30px;
    line-height: 30px;
    width: 100%;
    background-color: rgba(255, 62, 109, 0.2);
    vertical-align: middle;
    color: #ff3e6d;
    padding-left: 43px;
    font-size: 12px;
    position: relative;
    img {
      position: absolute;
      left: 13px;
      top: 50%;
      transform: translateY(-50%);
      width: 16px;
      height: 16px;
    }
  }
  .rightList {
    position: fixed;
    padding: 4px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 16px 0 #d8dee9;
    z-index: 99;
    li {
      width: 120px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      color: #273553;
      font-size: 12px;
      &:hover {
        background-color: rgba(48, 78, 236, 0.05);
      }
    }
  }
}
</style>
